<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="cancel()">取消</button>
</body>
<script>
  {
      /**
       * 自定义定时器函数，使用 requestAnimationFrame 实现定时回调
       * @param {Function} callback - 需要定时执行的回调函数
       * @param {number} time - 执行回调的时间间隔（毫秒）
       * @returns {{clearLoop: function()}} 返回包含清除方法的对象
       */
      function customInterval(callback,time){
          // 记录上次执行时间和动画帧ID
          let lastTime = Date.now()
          let frameId = null

          /**
           * 循环执行函数，通过时间差控制回调执行频率
           */
          function loop(){
              const currentTime = Date.now()

              // 当达到间隔时间时执行回调并更新时间戳
              if (currentTime - lastTime >= time){
                  callback()
                  lastTime = currentTime
              }

              // 持续请求下一帧动画
              frameId = requestAnimationFrame(loop)
          }

          // 启动循环检测
          loop()

          // 返回清除定时器的方法对象
          return {
              /**
               * 停止动画帧循环
               */
              clearLoop: function(){
                  if(frameId){
                      cancelAnimationFrame(frameId)
                  }
              }
          }
      }


    let index = 0
      let timer = customInterval(()=>{
      console.log(index)
      index++
    },1000)
      function cancel(){
          timer.clearLoop()
      }
  }
</script>
</html>
